<template>
  <!-- 数据模型 -->
  <div style="width: 100%">
    <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
      <el-table-column prop="tableComment" label="中文名称" width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.tableComment, listQuery.searchName)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="tableName" label="英文名称" width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.tableName, listQuery.searchName)"></span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="编码" width="180">

      </el-table-column>
      <el-table-column prop="tableSecurityLevel" label="安全等级" sortable width="180">
        <template slot-scope="{ row }">
          <span v-if="row.tableSecurityLevel == 1">机密</span>
          <span v-else-if="row.tableSecurityLevel == 2">秘密</span>
          <span v-else-if="row.tableSecurityLevel == 3">内部公开</span>
          <span v-else>外部公开</span>
        </template>
      </el-table-column>



      <el-table-column prop="" label="标签" width="180">

        <!-- <template slot-scope="{ row }">
          <div v-if="row.description == '监测信息'" style="width: 80px; text-align: center; height: 40px; background: blue; color: white; line-height: 40px">监测信息</div>
          <div v-else-if="row.description == '雨量监测'" style="width: 80px; text-align: center; height: 40px; background: greenyellow; color: white; line-height: 40px">雨量监测</div>
          <div v-else-if="row.description == ''"></div>
        </template> -->
      </el-table-column>
      <el-table-column prop="" label="数据目录" width="180">
        <template slot-scope="{ row }">
          <span v-html="brightenKeyword(row.pathValue, listQuery.searchName)"></span>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
      :page-sizes="pageArray" @pagination="getList(listQuery)" />
  </div>
</template>

<script>
import { getqueryTableModel } from '@/api/modelDataApi/index'
import Pagination from '@/components/Pagination/index.vue'

export default {
  props: ['valueprops'],
  components: {
    Pagination,
  },
  data() {
    return {
      currentPage1: 5,
      tableData: [],
      total: 0,
      pageArray: this.$store.getters.pageArray,
      listQuery: {
        searchName: "实时信息",
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      },
    }
  },

  methods: {
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i')
      if (val) {
        return val.replace(Reg, `<span style="color: red;">${keyword}</span>`)
      }
    },
    refFun(item) {
      this.listQuery.searchName = item
      this.getList(this.listQuery)
    },
    getList(item) {
      getqueryTableModel({
        params: item,
      }).then((res) => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
  },
}
</script>
<style lang="sass" scoped></style>
